<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Instagram ${brand.enName} Brand Analytics | Gugee Data</title>
    <meta name="description" content="Let's check out Instagram ${brand.enName} Brand analytic report on GugueeData.">
    <meta name="keywords" content="${brand.enName} , Instagram Shop">
    <meta property="og:title" content="Instagram ${brand.enName} Brand Analytics | Gugee Data">
    <meta property="og:description"
          content="Let's check out Instagram ${brand.enName} Brand analytic report on Gugee Data.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.gugeedata.com/instagram/brand/${brand.enName}">
    <meta property="og:image" content=" https://seo-imags.s3.us-east-2.amazonaws.com/Logo.png">
    <meta name="twitter:title" content="Instagram ${brand.enName} Brand Analytics | Gugee Data">
    <meta name="twitter:description"
          content="Let's check out Instagram ${brand.enName} Brand analytic report on Gugee Data.">

    <link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" href="${request.contextPath}/static/css/ins/common.css">
    <link rel="stylesheet" href="${request.contextPath}/static/css/ins/brand-detail.css">
    <#include "../../../component/facebookPixel.ftl">
</head>
<body>
<#include "../../../header_new1.ftl">
<main>
    <section>
        <div class="container">
            <h1>Instagram ${brand.enName} Brand Analytics</h1>
            <h2>Check Instagram brand analytic report of ${brand.enName}</h2>
            <div class="detail-info">
                <div class="avatar">
                    <#assign logo=myController.getNoExpiredImage(brand.logo, 1, 0)>
                    <img src="${logo}" alt="logo">
                </div>
                <div class="info">
                    <div class="title">${brand.enName}</div>
                    <#if brand.categoryName??>
                        <div class="sub-title category">${brand.categoryName}</div>
                    </#if>
                </div>
                <div class="option">
                    <#if collectId??>
                        <div class="gd-popover" <#if isMobile == false>content="Remove from Favorite"</#if> >
                            <div class="icon-collect is-collect" data-id="${brand.id?c}" data-fid="${collectId?c}">
                                <i class="iconfont iconquxiaoshoucang33"></i>
                            </div>
                        </div>
                    <#else>
                        <div class="gd-popover" <#if isMobile == false>content="Add to Favorite"</#if>>
                            <div class="icon-collect" data-id="${brand.id?c}">
                                <i class="iconfont iconshoucang"></i>
                            </div>
                        </div>
                    </#if>
                </div>
            </div>
            <#if isMobile == true>
                <div class="bg-gray"></div>
            </#if>
            <div class="detail-wrap">
                <div class="sort-tab">
                    <ul>
                        <li class="is-active">Media</li>
                        <li>Official Account</li>
                        <li>Flagship Product</li>
                        <li>Ad Partner</li>
                    </ul>
                </div>
                <#include "media.ftl">
                <#include "account.ftl">
                <#include "product.ftl">
                <#include "partner.ftl">
            </div>
        </div>
    </section>
</main>
<#if isMobile == false>
    <#include "../../../footer_new.ftl">
</#if>
<script src="${request.contextPath}/static/js/gd-ui/collapse/index.js"></script>
<script src="${request.contextPath}/static/js/gd-ui/popover/index.js"></script>
<script src="${request.contextPath}/static/js/gd-ui/button/group.js"></script>
<script>
    function checkUnlockPermission() {
        if (!gugeeGobal.isLogin) {
            toLogin()
            return false
        }

        showLoading()
        _axios.get('/ins/brand/report/unlock/checked').then(res => {
            if (res.Code === 200) {
                let extra = ''
                let isShowAgain = !localStorage.getItem('isShowAgain')
                if (res.Data) {
                    if (res.Data.type === 1) {
                        if (isShowAgain) {
                            extra = '<div class="tips"><input type="checkbox"/><span>Do not show this message again.</span></div>'
                        } else {
                            unlockReport()
                            return false
                        }
                    }
                    showModal({
                        content: res.Msg + extra,
                        confirmBtn: {
                            event: () => {
                                unlockReport(res.Data.type)
                            }
                        }
                    })
                } else {
                    window.location.href = '/pricing'
                }
            } else {
                showToast(res.Msg)
            }
            hideLoading()
        })
        return true
    }

    function unlockReport(type) {
        showLoading()
        if (type === 1) {
            let checkbox = document.querySelector('.modal input')
            if (checkbox.checked) {
                localStorage.setItem('isShowAgain', 1)
            } else {
                localStorage.removeItem('isShowAgain')
            }
        }
        _axios.post('/ins/brand/report/unlock', {
            bid: '${brand.id?c}'
        }).then(res => {
            if (res.Code === 200) {
                window.location.reload()
            } else {
                hideLoading()
            }
            closeModal()
        })
    }
</script>
<script type="module">
    import {collectAction, troggleActive} from "/static/js/common.js"

    initEvent()
    function initEvent() {
        const collectElement = document.querySelector('.option .icon-collect')
        collectElement.addEventListener('click', () => {
            collectAction({
                element:collectElement,
                url: '/ins/fa/brand',
                collectKey: 'bid'
            })
        })

        const tabs = document.querySelectorAll('.detail-wrap .sort-tab li')
        let firstLoad = []
        tabs && tabs.forEach((item, i) => {
            item.addEventListener('click', () => {
                changeAccountTab(item, i)
                if (i !== 0 && !firstLoad.includes(i)) {
                    firstLoad.push(i)
                    <#if isUnlocked == true>
                    switch (i) {
                        case 1:
                            const audienceChart = echarts.getInstanceByDom(document.getElementById('audienceTrend'))
                            audienceChart && audienceChart.resize()
                            const industryChart = echarts.getInstanceByDom(document.getElementById('industryTrend'))
                            industryChart && industryChart.resize()
                            break
                        case 2:
                            const echartsElement = echarts.getInstanceByDom(document.getElementById('promoteTrend'))
                            echartsElement && echartsElement.resize()
                            break
                        case 3:
                            const adechartsElement = echarts.getInstanceByDom(document.getElementById('partnerTrend'))
                            adechartsElement && adechartsElement.resize()
                            break
                    }
                    </#if>
                }
            })
        })

        document.querySelectorAll('.lock-tips .btn-default').forEach(item => {
            item.addEventListener('click', () => {
                if(gugeeGobal.isLogin) {
                    checkUnlockPermission()
                } else {
                    toLogin()
                }
            })
        })
        document.querySelectorAll('.lock-tips .btn-info').forEach(item => {
            item.addEventListener('click', () => {
                if(gugeeGobal.isLogin) {
                    window.location.href = '/pricing?refer=' + window.location.href
                } else {
                    toLogin()
                }
            })
        })
    }

    function changeAccountTab(element, index) {
        troggleActive(element, () => {
            //scroll 定位
            if (gugeeGobal.isMobile) {
                const scrollWrap = document.querySelector('.sort-tab ul')
                //判断滑动内容和屏幕宽度的大小，40为padding
                if (scrollWrap.scrollWidth > (document.body.offsetWidth - 40)) {
                    // padding-left: 20  margin-right: 35
                    const position = element.offsetLeft - (20 + 35) - element.clientWidth / 2
                    scrollWrap.scrollTo(position, 0)
                }
                //滑动到内容顶部
                const accountWrap = document.querySelector('.detail-wrap')
                const accountWrapTop = getElementPosition(accountWrap).top - 60
                if (getScroll().top > accountWrapTop) {
                    window.scrollTo(0, accountWrapTop)
                }
            }

            //内容显示隐藏
            const tabWraps = document.querySelectorAll('.detail-wrap > .tab-wrap')
            tabWraps.forEach(item => {
                item.hide()
            })
            tabWraps[index].show()
        })
    }
</script>
</body>
</html>
